<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<link rel="stylesheet" href="./css/zepto.fullpage.css" />
		<link rel="stylesheet" href="./css/index.css" />
		<link rel="stylesheet" href="./css/animate.css" />
		<title>Document</title>
	</head>
	<body>
		<style>
			html,
			body {
				overflow: hidden;
				margin: 0;
				padding: 0;
				height: 100%;
				background: #f4f4f4;
				color: rgb(16, 16, 16);
				font-family: SourceHanSansSC;
				font-weight: 400;
			}

			.red {
				color: rgb(255, 3, 3);
				font-size: 1.75rem;
			}

			.wp {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				overflow: hidden;
			}

			/* 箭头 */
			@-webkit-keyframes start {

				0%,
				30% {
					opacity: 0.2;
					-webkit-transform: translate(0, 10px);
				}

				60% {
					opacity: 1;
					-webkit-transform: translate(0, 0);
				}

				100% {
					opacity: 0.2;
					-webkit-transform: translate(0, -5px);
				}
			}

			@keyframes start {

				0%,
				30% {
					opacity: 0.2;
					transform: translate(0, 10px);
				}

				60% {
					opacity: 1;
					transform: translate(0, 0);
				}

				100% {
					opacity: 0.2;
					transform: translate(0, -5px);
				}
			}

			.start {
				position: fixed;
				left: 50%;
				margin-left: -17px;
				top: 95%;
				margin-top: -34px;
				width: 34px;
				height: 34px;
			}

			.start b {
				position: absolute;
				left: 50%;
				top: 10px;
				margin-left: -9px;
				width: 19px;
				height: 12px;
				background: url(images/arrow.png);
				background-size: 100% 100%;
				-webkit-animation: start 1.5s infinite ease-in-out;
				animation: start 1.5s infinite ease-in-out;
			}

			.loginOut {
				position: absolute;
				right: 0.3125rem;
				top: 2.1875rem;
				z-index: 9
			}

			.hide {
				visibility: hidden;
			}

			h3 {
				line-height: 2.4375rem;
				font-size: 1.4375rem;
				font-weight: 700;
			}
		</style>
	
		<!-- 海报 -->
		<div id="capture" class="px-3 pt-4 pb-3" style="position: absolute;top:-5000px;width: 100%;">
			<div class="mt-4 ">
				<strong>XXXX<br />2023年闪烁年度回忆</strong>
			</div>

			<div class="text-center mt-4">
				<div>
					<div style="writing-mode: vertical-rl; display: inline-block; letter-spacing: 2rem; ">
						获年度专属称号</div>
					<div
						style="writing-mode: vertical-rl; display: inline-block; font-size: 4.5rem;letter-spacing: 1rem; ">
						人气欧皇</div>
				</div>
				<div class="text-center" style="margin-top: 5.875rem;">
					<div class="d-inline-block">
						<img src="./images/v2_sdzcmb.png" style="width: 4.3125rem;" />
						<div class="mt-2" style="font-size: 0.875rem;font-weight: 400;">前往查看年报</div>
					</div>
					<div class="d-inline-block ml-3" style="vertical-align: top;">
						<img src="./images/v2_sdzcmb.png" style="width: 4.3125rem;" />
						<div class="mt-1" style="font-size: 0.875rem;font-weight: 400;">五周年专服开启<br />请扫码查看专服更多福利</div>
					</div>
				</div>

			</div>
		</div>

<!-- 海报 -->
	<div class="modal fade" id="sshbModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-sm mt-4">
			<div class="modal-content">
				<div class="modal-body">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<div id="sshb_pic"></div>
				</div>
			</div>
		</div>
	</div>
		<script src="./js/html2canvas.min.js"></script>
		<script src="./qrcodejs/jquery.min.js"></script>
		
		<script src="./js/sgin1.min.js"></script>
		<script src="./js/sign.js"></script>
		<script src="./js/storage.js"></script>
		<script src="./js/SY_LOG.min.js"></script>
		<script src="./js/index.js"></script>
		
		<script>
			html2canvas(document.querySelector("#capture")).then(canvas => {
				//document.body.appendChild(canvas)
				var img = document.createElement('img');
				img.style.width='100%'
				img.src = canvas.toDataURL('image/png');
				document.body.innerHTML = ''
				document.body.appendChild(img)
			});

			
		</script>
	</body>
</html>